<template>
  <div>


    <el-card style="margin: 10px 2%;">
      <el-table
        :data="customer.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="margin: 18px 2%;width: 95%"
        stripe
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.orderBooks"
              size="mini">
              <el-table-column
                prop="id"
                label="id"
                width="50">
              </el-table-column>
              <el-table-column
                prop="book.title"
                label="标题"
                width="200">
              </el-table-column>
              <el-table-column
                prop="book.purchaseprice"
                label="批发价"
                width="200">
              </el-table-column>
              <el-table-column
                prop="amount"
                label="数量"
                width="200">
              </el-table-column>
              <el-table-column
                prop="price"
                label="总价"
                width="200">
              </el-table-column>

            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="id"
          width="60">
        </el-table-column>

        <el-table-column
          prop="name"
          label="顾客姓名"
        width="200">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="200">
        </el-table-column>
        <el-table-column
          sortable
          prop="serialid"
          label="订单号"
          width="200">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deletecustomer(scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="customer.length">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "Customer",
  data(){
    return{
      customer:[
      ],
      currentPage: 1,
      pageSize: 10,
      findcustomerid:''
    }
  },
  mounted:function() {
    this.listcustomer()
  },
  computed:{
    sum:function () {
      return 2
    }
  },
  methods:{
    listcustomer(){
      var _this=this
      _this.$axios.get('/customer').then(resp=>{
        this.customer=resp.data
      })
    },
    deletecustomer(item){

      this.$confirm('是否删除此记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var customerid = item.id;
        var url = '/customer/delete/' + customerid
        this.$axios.delete(url).then(resp => {
          this.listcustomer()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },

  },

}
</script>

<style scoped>

</style>
